<script setup>
import { computed, watch } from "vue"
import { useRoute } from "vue-router"
import { useBlog } from "@/stores/blog";
import BlogModel from "@/components/Blog/BlogModel.vue"
import UserInfor from "@/components/User/UserInfor.vue";

const route = useRoute()
const Blog = useBlog()
let username = ref(User.name) // 当前页面user
const blogs = ref([]) // 当前页面blogs
const start = ref(0), page = ref(10)

watch(() => route.query.name, (v) => {
  // url参数优先
  if (v) username.value = v
  else username.value = User.name
}, { immediate: true })

const loading = ref(false), noMore = ref(false) // 加载中,是否加载完了
const disabled = computed(() => loading.value || noMore.value);
const load = () => {
  loading.value = true;
  Blog.getBlogsbyUsername(username.value, start.value, page.value, (data, isNoMore) => {
    // false 为空，true不为空
    if (!isNoMore) noMore.value = true
    else blogs.value.push(...data)
    start.value += page.value
    loading.value = false
  })
}
load()

watch(username, (v, ov) => {
  if (v != ov) {
    // 用户名变了，全部重制
    blogs.value = []
    start.value = 0
    page.value = 10
    loading.value = false
    noMore.value = false
    load()
  }
})

</script>

<template>
  <!-- 顶部用户模块 -->
  <!-- {{ blogs }} -->
  <UserInfor :username="username" />

  <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <BlogModel v-for="blog in blogs" :id="'a' + blog.blogId" :key="blog.blogId" :blog="blog" />
    <div class="model" v-if="loading">加载中...</div>
  </div>
</template>

<style scoped></style>